<template>
	<view class="pay_property">
		<view class="property_top">
			<view class="top_zf">
				<view class="top_zf_fl">
					<image :src="'https://community.chuangxiangdianli.com/images/propertyImg/wuye_2@2x.png'" mode=""></image>
					<text>物业费账户</text>
				</view>
				<text class="top_zf_fr">{{propertyInfo.room_id}}</text>
			</view>
			<view class="top_ye">
				<view class="top_ye_item">
					<text>当前余额(元)</text>
					<text>{{propertyInfo.now_balance}}</text>
				</view>
				<!-- <view class="top_ye_item">
					<text>当前待缴(元)</text>
					<text>0.00</text>
				</view> -->
			</view>
		</view>
		<view class="property_nav">
			<text :class="['nav_item', currentNav == 1? 'curr_nav_item':'']" @click="currentNav = 1">代缴费用</text>
			<text :class="['nav_item', currentNav == 2? 'curr_nav_item':'']" @click="currentNav = 2">预缴费用</text>
		</view>

		<!-- 月度账单 -->
		<view class="monthly_bill" v-show="currentNav == 1">

			<!-- 未出账费用合计 -->
			<view class="bil_issued" :style="{marginBottom: (showBilIssued[0]? bilIssuedHeight:0)}">
				<view class="bil_top" @click="bilIssuedBtn(0)">
					<view class="bil_fl">
						未出账账单
					</view>
					<view class="bil_fr">
						<text>费用合计: {{propertyInfo.billed_money || 0}}</text>
						<image class="bil_img" src="http://community.chuangxiangdianli.com/images/home/down.png" mode=""></image>
					</view>
				</view>
				<!-- 未出账列表 -->
				<view class="bil_list" v-show="showBilIssued[0]">
					<view class="bil_li_item" v-for="(item,index) in propertyInfo.unpaid_arr" :key="index">
						<text>{{item.month}}</text>
						<text>费用: {{item.one_price}}元</text>
					</view>
				</view>
			</view>
			<!-- 已出账费用合计 -->
			<view class="no_bill" :style="{marginBottom: (showBilIssued[1]? noBillHeight:0)}">
				<view class="bil_top" @click="bilIssuedBtn(1)">
					<view class="bil_fl">
						已出账账单
					</view>
					<view class="bil_fr">
						<text>费用合计: {{propertyInfo.unpaid_money || 0}}</text>
						<image class="bil_img" src="http://community.chuangxiangdianli.com/images/home/down.png" mode=""></image>
					</view>
				</view>

				<!-- 已出账列表 -->
				<view class="bil_list" v-show="showBilIssued[1]">
					<view class="bil_li_item" v-for="(item,index) in propertyInfo.billed_arr" :key="index">
						<!-- 1是已支付 0是未支付 -->
						<label class="radio">
							<radio disabled style="transform:scale(0.7)" color="#f97d15" :checked="item.pay_status == 1" /></label>
						<text>{{item.month}}</text>
						<text>费用: {{item.one_price}}元</text>
					</view>
				</view>
			</view>

		</view>

		<!-- 预交费用 -->
		<view class="prepaid_fees" v-show="currentNav == 2">
			<view class="fess_moy">
				<text class="fess_moy_top">预缴金额</text>
				<view class="fess_moy_con">
					<text>￥{{prepaidFees}}</text>
					<!-- <text> 包含未缴清金额366.00元</text> -->
				</view>
			</view>
			<view class="fees_time">
				<text class="fees_time_fl">预缴时间</text>
				<view class="fees_time_fr" @click="feesDetails">
					<text v-if="monthSelNum.length">{{monthSelNum.length}}个月</text>
					<text v-else>{{monthTime}}</text>
					<image :src="'https://community.chuangxiangdianli.com/images/propertyImg/shui_up.png'" mode=""></image>
				</view>
				<view class="fees_time_list" v-if="showFeesDetails">
					<view class="fees_li_item" v-for="(v,n) in monthList" @click="clickRadio(v,n)" :key="n">
						<view>
							<image src="https://community.chuangxiangdianli.com/images/home/statis.png" style="width: 32rpx; height: 32rpx;"
							 v-if="v.isDefaultSelete" mode=""></image>
							<image src="https://community.chuangxiangdianli.com/images/home/nostatis.png" v-else mode=""></image>
							<text>{{v.text}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fees_foo_btn" @click="payProperty">
			<text>立即缴清</text>
		</view>
	</view>
</template>

<script>
	import {
		getStorages
	} from '@/utils/storage'
	export default {
		onLoad(option) {},
		onShow() {
			if (getStorages('userInfo')) {
				this.name = getStorages('userInfo').userInfo.username
			}
			this.getSettlementDetails()
		},
		data() {
			return {
				propertyInfo: {},
				currentNav: 1,
				// 户主名
				name: '',
				// 账单列表显示隐藏
				showBilIssued: [false, false],
				// 物业费结算数据
				propertyMoneyInfo: {},
				value: 1,
				// 显示隐藏预交费列表
				showFeesDetails: false,
				// 预缴时间数据列表
				feesDetailsList: {},
				// 预缴费用列表多选高亮
				current: 0,
				// 预约费用月份选择时间
				monthList: [
					// isDefaultSelete 是否为默认选中 isModifiable是否可修改
					{
						text: '1月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 1
					},
					{
						text: '2月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 2
					},
					{
						text: '3月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 3
					},
					{
						text: '4月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 4
					},
					{
						text: '5月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 5
					},
					{
						text: '6月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 6
					},
					{
						text: '7月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 7
					},
					{
						text: '8月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 8
					},
					{
						text: '9月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 9
					},
					{
						text: '10月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 10
					},
					{
						text: '11月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 11
					},
					{
						text: '12月份',
						isDefaultSelete: false,
						isModifiable: true,
						index: 12
					}
				],
				// 预交时间
				monthTime: '选择月份',
				// 已选择月份
				monthSelNum: [],
				// 预缴费用
				prepaidFees: 0,
				// 预缴费用月份
				months: []
			};
		},
		computed: {
			bilIssuedHeight() {
				if (this.propertyInfo.unpaid_arr) {
					return this.propertyInfo.unpaid_arr.length * 110 + 'rpx'
				}
			},
			noBillHeight() {
				if (this.propertyInfo.need_arr) {
					return this.propertyInfo.need_arr.length * 110 + 'rpx'
				}
			}
		},
		methods: {
			// 获取物业费用详情
			getSettlementDetails() {
				let _this = this
				_this.$mrequest2({
					url: 'Mini/property/showSettlementDetailsApi',
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						_this.propertyInfo = res.data
						console.log(_this.propertyInfo)
					}
				})
			},
			// 预缴费用
			monthRadioCheckedApi() {
				this.$mrequest2({
					url: 'Mini/property/monthRadioCheckedApi',
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						this.feesDetailsList = res.data

						this.filterDefaultSelete(res.data.month_data)
					}
				})
			},
			// 筛选出预交费用默认选中月份
			filterDefaultSelete(data) {
				for (let i = 0; i < data.length; i++) {
					for (let j = 0; j < this.monthList.length; j++) {
						if (data[i].index == this.monthList[j].index) {
							this.monthList[j].isDefaultSelete = data[i].checked == 1 ? true : false
							this.monthList[j].isModifiable = data[i].checked == 1 ? false : true
						}
					}
				}

			},
			// 查看费用 type == 1 未出账 type == 2 已出账
			bilIssuedBtn(type) {
				this.showBilIssued[type] = !this.showBilIssued[type]
				this.$forceUpdate()
			},
			// 支付物业费
			payProperty() {
				this.settlementPropertyApi()
			},
			// 物业费结算
			settlementPropertyApi() {
				let _this = this
				// let month = Array.from(new Set(this.months)).toString() 
				let month = Array.from(new Set(this.months)) 
				 month = this.arraySort(month) 
				
				_this.$mrequest2({
					url: 'Mini/property/settlementPropertyApi',
					method: 'POST',
					data: {
						flag: _this.currentNav,
						months: _this.currentNav == 2?  month.toString() : ''
					}
				}).then(res => {
					if (res.code == 200) {
						let {
							money,
							months
						} = res.data
						let data = {
							// 费用类型：3，物业费
							fee_type: '3',
							type: 1,
							// 金额
							paymentMoney: money,
							// 支付方式
							pay_type: 1,
							// 设备类型：1，小程序；2，公众号；3，H5
							device_type: 1,
							// 缴费月份
							months: months.toString()
						}
						//生成订单
						_this.$mrequest2({
							url: 'Mini/pay_order/store',
							method: 'POST',
							data
						}).then(res => {
							if (res.code == 200) {
								// 获取订单等信息
								let storeInfo = res.data
								// 调起支付
								uni.requestPayment({
									// 服务商类型
									provider: 'wxpay',
									// 订单数据
									// orderInfo
									// 时间戳
									timeStamp: storeInfo.return_Data.timeStamp,
									// 随机字符串
									nonceStr: storeInfo.return_Data.nonceStr,
									// prepay_id 参数值
									package: storeInfo.return_Data.package,
									// 签名算法
									signType: storeInfo.return_Data.signType,
									// 签名
									paySign: storeInfo.return_Data.paySign,
									success: res => {
										console.log(res)
										uni.showToast({
											title: '支付成功',
											icon: 'none'
										})
										// 返回上一页
										uni.navigateBack({
											delta: 1
										})
									},
									fail: err => {
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										})
										console.log('fail:' + JSON.stringify(err));
									}
								})
							}
						})
					}
				})
			},
			// 预缴时间
			feesDetails() {
				this.showFeesDetails = !this.showFeesDetails
			},
			// 预缴费用改变月份
			clickRadio(e, i) {
				// 默认选中不予修改 
				if (e.isModifiable) { 
					for(let j = 1; j<=i; j++){
						// 非默认选中 
						if(this.monthList[j].isModifiable){
							// 选中月份
							if(!e.isDefaultSelete){
								this.monthList[j].isDefaultSelete = true
								this.monthSelNum = this.monthList.filter((v, i) => {
									return v.isDefaultSelete && v.isModifiable
								})
								// 计算预缴金额总额 
								this.prepaidFees = this.monthSelNum.length * this.feesDetailsList.one_price
								// 拼接月份   选中状态 
								if (e.isDefaultSelete) {
									this.months.push(this.feesDetailsList.month_data[j].month) 
								}
							}else{
								// 取消选中月份 
								for(let j = 1; j<=this.monthList.length; j++){
									if(j >= i){
										this.monthList[j].isDefaultSelete = false
										this.monthSelNum = this.monthList.filter((v, i) => {
											return v.isDefaultSelete && v.isModifiable
										})
										// 计算预缴金额总额
										this.prepaidFees = this.monthSelNum.length * this.feesDetailsList.one_price
									} 
								}
							}
							 
						} 
					} 
					  
				}
			},
			// 冒泡排序
			arraySort(arr){ 
				for(let i = 0; i<arr.length;i++){
					for(let j = i; j<arr.length; j++){
						if(arr[i] > arr[j]){
							let tmp = arr[i];
							arr[i] = arr[j];
							arr[j] = tmp
						}
					}
				}
				return arr
			}
		},
		watch: {
			currentNav(num) {
				console.log(num)
				if (num == 2) {
					this.monthRadioCheckedApi()
				}
			}
		}
	}
</script>

<style lang="scss">
	.pay_property {
		height: calc(100% - 136rpx);
		background-color: #fff;

		.property_top {
			padding: 0 36rpx;
			font-size: 28rpx;
			background-color: #fff;

			.top_zf {
				display: flex;
				justify-content: space-between;
				height: 98rpx;
				line-height: 98rpx;
				border-bottom: 1rpx solid #f7f8f9;

				.top_zf_fl {
					display: flex;

					image {
						margin: auto 24rpx auto 0;
						width: 39rpx;
						height: 50rpx;
					}
				}
			}

			.top_ye {
				display: flex;
				flex-direction: column;
				border-bottom: 20rpx solid #f6f4f7;

				.top_ye_item {
					height: 110rpx;
					line-height: 110rpx;
					display: flex;
					justify-content: space-between;
					line-height: 115rpx;
				}
			}
		}

		.property_nav {
			margin-top: 14rpx;
			display: flex;
			height: 109rpx;
			line-height: 109rpx;
			background-color: #fff;

			.nav_item {
				margin: 0 100rpx;
				flex: 1;
				text-align: center;
			}

			.curr_nav_item {
				border-bottom: 4rpx solid #34b0ff;
			}
		}

		.prepaid_fees {
			padding: 16rpx 30rpx;

			.fess_moy {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding-left: 44rpx;
				height: 172rpx;
				font-size: 30rpx;
				font-weight: 700;
				background-color: #fff;
				border-radius: 10rpx;

				.fess_moy_con {
					display: flex;
					color: #f97d15;

					& text:nth-child(2) {
						margin-left: 30rpx;
						font-size: 24rpx;
						color: #737373;
					}
				}
			}

			.fees_time {
				position: relative;
				padding: 0 44rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 18rpx;
				height: 110rpx;
				line-height: 110rpx;
				font-size: 28rpx;
				background-color: #f6f4f7;
				border-radius: 10rpx;

				.fees_time_fr {
					flex: 1;
					text-align: right;

					&>image {
						margin-left: 10rpx;
						width: 22rpx;
						height: 22rpx;
					}
				}

				.fees_time_list {
					display: flex;
					flex-wrap: wrap;
					position: absolute;
					top: 130rpx;
					left: 0;
					width: 100%;
					background-color: #f6f4f7;

					.fees_li_item {
						width: 33%;
						text-align: center;

						image {
							width: 38rpx;
							height: 38rpx;
						}
					}
				}
			}
		}

		.monthly_bill {



			.bil_issued,
			.no_bill {
				position: relative;
				margin: 10rpx 20rpx;
				padding: 0 40rpx;
				display: flex;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #f6f4f7;
				border-radius: 10rpx;

				.bil_top {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.bil_fl {
						font-weight: 700;
					}

					.bil_fr {
						display: flex;
						font-size: 24rpx;
						color: #9c9b9c;

						.bil_img {
							margin: auto 0 auto 20rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.bil_list {
					position: absolute;
					top: 100rpx;
					left: 0;
					width: 100%;

					.bil_li_item {
						position: relative;
						padding: 0 40rpx;
						display: flex;
						justify-content: space-between;
						height: 100rpx;
						line-height: 100rpx;
						border-bottom: 1rpx solid #f6f4f7;

						.radio_group {
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}

		}

		.fees_foo_btn {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 136rpx;
			background-color: #fff;

			text {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 663rpx;
				height: 92rpx;
				color: #fff;
				font-size: 36rpx;
				background-color: #34b0ff;
				border-radius: 10rpx;
				line-height: 100rpx;
				text-align: center;
			}
		}

	}
</style>
